<template>
	<view>
		<view class="content">
			<view class="items">
				<view class="item_l">商品名称</view>
				<view class="">
					<input v-model="params.productName" placeholder-class="inputs" type="text" placeholder="请输入商品名称" />
				</view>
			</view>
			<view class="items">
				<view class="item_l">商品品类</view>
				<view class="rigicon" @click="pageselect" :style="{color:category?'#000':''}">
					<span v-if="params.category == ''">请选择</span>
					<view v-else class="it" v-for="item in categoryList">
						{{item}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="items">
				<view class="item_l">售价(￥)</view>
				<view class="">
					<input v-model="params.price" placeholder-class="inputs" type="digit" placeholder="请输入商品售价" />
				</view>
			</view>
			<view class="items">
				<view class="item_l">原价(￥)</view>
				<view class="input_flex">
					<view class="">
					</view>
					<view class="flex_b">
						<input v-model="params.priceOldBegin" placeholder-class="inputs" type="digit"
							placeholder="请输入价格" />
						<span>—</span>
						<input v-model="params.priceOldEnd" placeholder-class="inputs" type="digit"
							placeholder="请输入价格" />
					</view>
				</view>
			</view>
			<view class="items">
				<view class="item_l">取餐时间</view>
				<view class="">
					<view class="rigicon" @click="opentime" :style="{color:times?'#000':''}">
						{{times?times:'请选择'}}
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="item_l">商品重量(g)</view>
				<view class="">
					<input v-model="params.weight" placeholder-class="inputs" type="digit" placeholder="请输入商品重量" />
				</view>
			</view>
			<view class="img">
				<view class="item_l">商品主图</view>
				<view class="" style="margin-top: 20rpx;">
					<imageUpload :upWith="140" :upHeight="140" :imgList="imageList" :maxCount="9" @change="imgFn">
					</imageUpload>
				</view>
			</view>
			<view class="block_1">
				<view class="tit">
					商品介绍
				</view>
				<textarea v-model="params.info" type="text" placeholder-class="inputs1" placeholder="请输入" />
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footerbtn" @click="handleBc">
			<view class="cont">
				<!-- <view class="btn">
					提交
				</view> -->
				<button :class="isdisabled?'absbtn':''" :disabled="isdisabled" class="btn" type="primary">提交</button>
			</view>
		</view>
		<selecttime ref="time" :startDefaultTime="startDefaultTime" :endDefaultTime="endDefaultTime"
			@timeRange="timeRange"></selecttime>
	</view>
</template>

<script>
	import {
		addProduct,
		editProduct,
		getProductInfo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				startDefaultTime: "12:00", //默认值
				endDefaultTime: "23:00", //
				params: {
					productName: "",
					category: "",
					price: "",
					priceOldBegin: "",
					priceOldEnd: "",
					takeTimeBegin: "",
					takeTimeEnd: "",
					weight: "",
					img: "",
					info: "",
				},
				times: '',
				categoryList: [],
				imageList: [],
				shopid: '',
				isdisabled: false
			};
		},
		onShow() {
			uni.$once('nowType', (data) => {
				this.categoryList = data
				this.params.category = data.join(',')
			})
		},
		onLoad(option) {
			if (option.shopid) {
				this.shopid = option.shopid
				uni.setNavigationBarTitle({
					title: '修改商品'
				})
				getProductInfo({
					id: option.shopid
				}).then(res => {
					Object.keys(this.params).forEach(key => {
						this.params[key] = res.data[key]
					})
					this.categoryList = res.data.category.split(',')
					this.startDefaultTime = res.data.takeTimeBegin.substring(0, 5)
					this.endDefaultTime = res.data.takeTimeEnd.substring(0, 5)
					this.times = this.startDefaultTime + '-' + this.endDefaultTime
					this.imageList = res.data.img.split(',').map(url => {
						return {
							url
						}
					})
				})
			} else {
				uni.setNavigationBarTitle({
					title: '新增商品'
				})
			}

		},
		methods: {
			imgFn(e) {
				this.imageList = e
				let ulist = e.map(item => {
					return item.url
				})
				this.params.img = ulist.join(',')
			},
			handleBc() {
				if (this.shopid) {
					this.params.id = this.shopid
						editProduct(this.params).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '商品已修改'
								})
								setTimeout(() => {
									uni.navigateBack()
									uni.$emit('edit','1')
								}, 1000)
							}
						})
				} else {
					// uni.showLoading({
					// 	title: '加载中'
					// });
					this.isdisabled = true
					if (this.isdisabled) {
						addProduct(this.params).then(res => {
							if (res.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '商品已增加'
								})
								setTimeout(() => {
									uni.navigateBack()
									uni.$emit('edit','1')
								}, 1000)
							}
							this.isdisabled = false
						})
					}

				}
			},
			pageselect() {
				uni.navigateTo({
					url: `/pages/shop/selectpl?nowtype=${this.params.category}`
				})
			},
			opentime() {
				this.$refs.time.open()
			},
			timeRange(e) {
				this.params.takeTimeBegin = e[0]
				this.params.takeTimeEnd = e[1]
				this.times = e[0] + '-' + e[1]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.inputs {
		color: #D1CDCD;
	}

	.content {
		background: #fff;
		margin-top: 20rpx;
		padding: 44rpx 30rpx;
		box-sizing: border-box;
	}

	.block_1 {
		background: #ffffff;
		margin-bottom: 20rpx;

		textarea {
			width: 690rpx;
			height: 200rpx;
			background: #FBFBFB;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
		}

		.inputs1 {
			font-weight: 400;
		}

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.img {
		margin-bottom: 20rpx;

	}


	.item_l {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 50rpx;

		.item_l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			text-align: right;
		}

		.rigicon {
			color: #D1CDCD;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.it {
				height: 44rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0 15rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #7B7B7B;
				margin-left: 15rpx;
				line-height: 44rpx;
			}
		}

		.input_flex {
			display: flex;
			flex: 1;
			justify-content: space-between;
			align-items: center;

			span {
				margin: 0rpx 6rpx;
			}

			input {
				max-width: 140rpx;
				text-align: center;
			}
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}
</style>